<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- {{ a }} -->

      <!-- 测试1 -->
      <input
        :[test]="anniu"
        @click="a=(a==='changexiaotong'?'xiaotong':'changexiaotong')"
        value="修改按钮"
      />
      <div>{{a}}</div>
      <!-- 测试2 -->
      <p v-if="condition">Using mustaches: {{ rawHtml }}</p>
      <h1 v-else>Oh no 😢</h1>
      <p>Using v-html directive: <span v-html="rawHtml"></span></p>

      <!-- 测试3 -->
      <div v-for="(item,index) in arr" :key="index">{{index+item}}</div>

      <!-- 测试4 -->
      <!-- <div v-for="(value, name,index) in obj" :key="index">
        {{index+" "+name+" "+value}}
      </div> -->

      <!-- 测试5 -->
      <li v-for="n in evenNumbers">{{ n }}</li>
    </div>
    <!-- <input type="text" v-bind:value="message" /> -->

    <script src="./vue.js" type="text/javascript" charset="utf-8"></script>
    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          numbers: [1, 2, 3, 4, 5],
          test: "type",
          anniu: "button",
          condition: true,
          a: "xiaotong",
          arr: ["xiaotong", "xiaozhang", "yuehua"],
          obj: {
            name: "xiaotong",
            age: 23,
            gender: "male",
          },
          rawHtml: "<span style='color: red'>测试v-html</span>",
        },
        computed: {
          evenNumbers: function () {
            return this.numbers.filter(function (number) {
              return number % 2 === 0;
            });
          },
        },
        created: function () {
          // `this` 指向 vm 实例
          console.log("a is: " + this.$data.a);
        },
      });
      // console.log(vm.$data);
      // console.log(vm.$el === document.getElementById("app"));
    </script>
  </body>
</html>
